import React, { PureComponent } from 'react'
import { View, Text,Image, StyleSheet } from 'react-native'
import PropTypes from 'prop-types'
import Accordion from 'react-native-collapsible/Accordion';
import screen from '../../../../utils/screen'
import TableChildren from './TableChildren'

const rightArrayImg = require('../../../../images/home/right-arrow.png')
const bottomArrayImg = require('../../../../images/home/bottom-arrow.png')

class TouchableComponent extends PureComponent {
  render() {
    return (
      <View>HELLO WORLD</View>
    )
  }
}

export default class extends PureComponent {
  static propTypes : {
    sections: PropTypes.any,
    collapsed: PropTypes.bool,
    activeSection: PropTypes.any,
    initiallyActiveSection: PropTypes.any,
    timeD: PropTypes.any,
    xtype: PropTypes.any
  }

  state = {
    activeSection: this.props.activeSection === undefined ? -1: this.props.activeSection,
    collapsed: false,
  }

  _toggleExpanded = () => {
    this.setState({ collapsed: !this.state.collapsed });
  }

  _setSection(section) {
    this.setState({ activeSection: section });
  }

  _renderHeader = (section, i, isActive) => {
    const content = section.title || {}
    return (
      <View style={styles.contentRow}>
        <View style={[styles.one, styles.contentCell]}>
          <View style={{flexDirection: 'row', alignItems: 'center'}}>
            {
              isActive ?
                <Image style={{height: screen.pxToDp(25), width: screen.pxToDp(25)}} source={bottomArrayImg} /> :
                <Image style={{height: screen.pxToDp(25), width: screen.pxToDp(25)}} source={rightArrayImg}/>
            }

            <Text numberOfLines={1}>{content.name}</Text>
          </View>
        </View>
        {
          content.amount !== undefined && (
            <View style={[styles.two, styles.contentCell]}><Text>{content.amount}</Text></View>
          )
        }
        {
          content.yoy !== undefined && (
            <View style={[styles.three, styles.contentCell]}><Text>{content.yoy}</Text></View>
          )
        }
        {
          content.qoq !== undefined && (
            <View style={[styles.four, styles.contentCell]}><Text>{content.qoq}</Text></View>
          )
        }
      </View>
    );
  }

  _renderContent = (section, i, isActive) => {
    const content = section.content
    return (
      <TableChildren {...this.props} key={i} content={content} timeD={this.props.timeD} xtype={this.props.xtype}/>
    );
  }

  render() {
    const { sections, initiallyActiveSection } = this.props;
    const initActive = initiallyActiveSection || 1
    return (
      <Accordion
        activeSection={this.state.activeSection}
        sections={sections}
        renderHeader={this._renderHeader}
        // touchableComponent={TouchableComponent}
        renderContent={this._renderContent}
        duration={400}
        onChange={this._setSection.bind(this)}
      />
    )
  }
}

const styles = StyleSheet.create({
  contentRow: {
    flexDirection: 'row',
    backgroundColor: 'white',
    height: screen.pxToDp(100),
  },
  contentCell: {
    justifyContent: 'center',
    marginHorizontal:screen.pxToDp(5)
  },
  one: {
    width: screen.pxToDp(260),
    paddingLeft: screen.pxToDp(31)
  },
  two: {
    flex: 3
  },
  three: {
    flex: 2
  },
  four: {
    flex: 2
  }
})
